import React from 'react';
import { Row, Col } from 'antd';
import { openLinkUrl } from '../../util/common';
import { WeaErrorPage, WeaTools,WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
//个人数据元素
class DataCenterCom extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: props.data,
            dcheight:props.contentview.style.height,
            eContentShowType: this.props.esetting.eContentShowType
        }
        this.callBack = this.callBack.bind(this);
    };
    componentDidMount() {
        this.callBack();
    }
    componentWillReceiveProps(nextProps){
        this.setState({list: nextProps.data,dcheight:nextProps.contentview.style.height}, ()=> {
            this.callBack()
        });
    }

    callBack(){
        const {eid} = this.props;
        const openlink = this.props.esetting.linkmode;
        const eContentShowType = this.props.esetting.eContentShowType; 
        if(eContentShowType !='1') {
            $(`#content_view_id_${eid} .module`).hover(function(dom) {                
                $(this).css("background-image", "none");             
                $(this).find(".mtitle").show().css("line-height", this.clientHeight+"px");              
                $(this).css("opacity", '0.8')
            }, function() {
                $(this).css("background-image", "url(/images/homepage/portalcenter/" + $(this).attr("data-type") + "_wev8.png)");
                $(this).find(".mtitle").hide();
                $(this).css("opacity", '1')
            })
        }else {
            $(`#content_view_id_${eid} .module`).hover(function(dom) {
                $(this).css("background-image", "none");           
                $(this).find(".mtitle").show().css("line-height", this.clientHeight+"px");    
                $(this).css("opacity", '0.8')
            }, function() {
                $(this).css("background-image", "none");
                $(this).find(".mtitle").show();
                $(this).css("opacity", '1')
            })
        }
        //去除点击事件绑定
        $(`#content_view_id_${eid} .module`).unbind("click");

        // $(".module").attr("onclick","");
        //再绑定点击事件
        $(`#content_view_id_${eid} .module`).click(function() {
            const dataUrl = $(this).attr("data-url");
            openLinkUrl(dataUrl, openlink);
        })
    }
    render() {
        const { list ,dcheight } = this.state;
        const { esetting } = this.props;
        let itemh1='240';
        let itemh2='120';
        dcheight==undefined||parseInt(dcheight)<60?(itemh1='240',itemh2='120'):(itemh1=parseInt(dcheight)+'',itemh2=parseInt(dcheight)/2+'');
        let html = null;
        switch (list.length) {
            case 1:
            case 2:
            case 3:
                html = list.map(item => <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p3gjuj@${item.model}`} span={24/list.length}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@bq5ull@${item.model}`} esetting={esetting} item={item} height={itemh1}/></Col>);
                break;
            case 4:
                html = list.map(item => <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qswguk@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@tndk07@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col>);
                break;
            case 5:
                html = list.map((item, i) => {
                    switch (i) {
                        case 0:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lpe6gx@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@7wxy62@${item.model}`} esetting={esetting} item={item} height={itemh2}/><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@4gzj0q@${item.model}`} esetting={esetting} item={list[i+3]} height={itemh2}/></Col>
                        case 1:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1yobgt@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@jgrl1p@${item.model}`} esetting={esetting} item={item} height={itemh1}/></Col>
                        case 2:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x0kn94@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@smvmjs@${item.model}`} esetting={esetting} item={item} height={itemh2}/><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@bzkwjs@${item.model}`} esetting={esetting} item={list[i+2]} height={itemh2}/></Col>
                        default:
                            return <div></div>;
                    }
                });
                break;
            case 6:
                html = list.map((item, i) => <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nqzuwe@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@o81xsc@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col>);
                break;
            case 7:
                html = list.map((item, i) => {
                    switch (i) {
                        case 1:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ayn7iv@${item.model}`} span={8}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@sud8as@${item.model}`}><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@808qho@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@8a64du@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@w5fz2u@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@n5dzl1@${item.model}`} esetting={esetting} item={list[i+1]} height={itemh2}/></Col></Row></Col>
                        case 2:
                            return <div></div>;
                        default:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n6019i@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@qljttv@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col>
                    }
                });
                break;
            case 8:
                html = list.map((item, i) => {
                    switch (i) {
                        case 1:
                        case 4:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6uwqzu@${item.model}`} span={8}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@h64u5w@${item.model}`}><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xxfmow@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@47kg3l@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@udmvbj@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@s67uas@${item.model}`} esetting={esetting} item={list[i+1]} height={itemh2}/></Col></Row></Col>
                        case 2:
                        case 5:
                            return <div></div>;
                        default:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vkp5xn@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@k8h4cb@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col>
                    }
                });
                break;
            case 9:
                html = list.map((item, i) => {
                    switch (i) {
                        case 1:
                        case 4:
                        case 7:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xak1m0@${item.model}`} span={8}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@96wrbk@${item.model}`}><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jfpetz@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@ac7uvo@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col><Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kjj2r8@${item.model}`} span={12}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@uxbag4@${item.model}`} esetting={esetting} item={list[i+1]} height={itemh2}/></Col></Row></Col>
                        case 2:
                        case 5:
                        case 8:
                            return <div></div>;
                        default:
                            return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ujreu9@${item.model}`} span={8}><Module ecId={`${this && this.props && this.props.ecId || ''}_Module@kvrzz5@${item.model}`} esetting={esetting} item={item} height={itemh2}/></Col>
                    }
                });
                break;
        }
        return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gfrena`}>{html}</Row>
    }
}



class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@s48xih`} msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
        );
    }
}
DataCenterCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(DataCenterCom);

export default DataCenterCom;

const Module = ({ esetting={}, item, height }) => {
    if(esetting.eContentShowType == '1'){
        return <div className={`module ${item.model}`} data-type={item.model} data-url={item.url} style={{backgroundColor:item.color,height:height+'px', backgroundImage: 'none'}}>
            <div className="num">{item.value}</div>
            <div className="mtitle" title={item.label} style={{display: 'block', lineHeight: height+'px'}}>{item.label}</div>
        </div>
    }else {
        return <div className={`module ${item.model}`} data-type={item.model} data-url={item.url} style={{backgroundColor:item.color,height:height+'px'}}>
            <div className="num">{item.value}</div>
            <div className="mtitle" title={item.label} >{item.label}</div>
        </div>
    }
}